<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Plain Office
Description: A two-column, fixed-width blog design.
Version    : 1.0
Released   : 20071001

-->
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>{{settings.title}}</title>
<meta content="" name="keywords"/>
<meta content="" name="description"/>
<link type="text/css" rel="stylesheet" href="/static/styles/default.css"/>
<script type="text/javascript" src="/static/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.blockUI.js"></script>
<script type="text/javascript">
String.prototype.format = function () {
    var args = arguments;
    return this.replace(/\{(\d+)\}/g, function (m, n) { return args[n]; });
};
String.prototype.escape = function () {
    var args = arguments;
    return this.replace(/</g, '').replace(/>/g, '');
};
formatfilesize = function(bytes){
    var bytes = bytes.toFixed(2);
    if(bytes<1024){
        return "{0} bytes".format(bytes);
    } else if(bytes<1024*1024){
        return "{0} KB".format((bytes/(1024)).toFixed(1));
    }else if(bytes<1024 * 1024 * 1024){
        return "{0} MB".format((bytes/(1024 * 1024)).toFixed(1));
    }
    return "{0} GB".format((bytes/(1024 * 1024 * 1024)).toFixed(2));
};
formatutc = function(date, format){
    /*
     * eg:format="yyyy-MM-dd hh:mm:ss";
     */
    var matches = date.match(/\d+/g);
    var date = Date.UTC(matches[0],matches[1]-1,matches[2],matches[3],matches[4],matches[5], 0);
    var temp = new Date();
    var localDate = date - temp.getTimezoneOffset()*60;
    localDate = new Date(localDate);
    var o = {
        "M+" :  localDate.getMonth()+1,  //month
        "d+" :  localDate.getDate(),     //day
        "h+" :  localDate.getHours(),    //hour
        "m+" :  localDate.getMinutes(),  //minute
        "s+" :  localDate.getSeconds(), //second
        "q+" :  Math.floor((localDate.getMonth()+3)/3),  //quarter
        "S"  :  localDate.getMilliseconds() //millisecond
    }

    if(/(y+)/.test(format)) {
        format = format.replace(RegExp.$1, (localDate.getFullYear()+"").substr(4 - RegExp.$1.length));
    }

    for(var k in o) {
        if(new RegExp("("+ k +")").test(format)) {
            format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
        }
    }
    return format;
};
$(document).ready(function() {
{% if users.is_admin %}
    $('#btncreate').click(function() {
        $.blockUI({ message: $('#create_album'), css: { width: '450px' } });
    });
    $('#cancel').click(function() {
        $.unblockUI();
    });
    $('#create').click(function() {
        var new_name = $('#new_name').val();
        if (/[#?\$%\^&\*\/\\<>,;]+/g.test(new_name)){
            alert('{{ _("invalid character in album name") }}');
            return;
        }
        $.post('/admin/ajax/',
                {'action': 'create_album',
                 'name': $('#new_name').val(),
                 'public': $('#new_public').attr('checked'),
                 'description': $('#new_description').val()
                },
                function(res){
                    if (res.status=='ok') {
                        window.location.reload();
                        $.unblockUI();
                    } else{
                        alert('error: '+res.error);
                    }
                }, "json");
    });
{% endif %}
    var ul = $('#dropmenu ul');
    var ul_width = ul.width();
    var ul_height = ul.height();
    $('#dropmenu').hover(
            function() {
                var window_height = $(window).height();
                var height_ratio = Math.ceil(ul_height/window_height);

                ul.width(ul_width * height_ratio).height(ul_height / height_ratio + 8);
                $('li', ul).each(function() {
                    $(this).width(ul.width() * 0.95 / height_ratio);
                    $(this).css({float:"left"});
                });
            },
            function() { ul.width(ul_width).height(ul_height); }
    );
});
</script>
{% block head_ex %} {% endblock %}
</head>
<body>
<!-- start header -->
<div id="logo">
    <h1><a href="/">{{settings.title}}</a></h1>
    <div id="subtitle"> {{settings.description}}</div>
    <div id="admin_search">
    <div id="admin">
            <a href="/?lang=zh-cn">中文版</a> | <a href="/?lang=en-us">English Version</a> |
        {% if users.is_owner %}
            <a href="/admin/settings/">{{ _('Admin')}}</a> |
        {% endif %}
        {% if users.cur_user %}
            <a href="/logout/">{{ _('Logout')}}</a>
        {% else %}
            <a href="/login/">{{ _('Login') }}</a>
        {% endif %}
        | <a href="/feed/"><img src="/static/images/rss.gif" alt="RSS" class="no_border"></a>
    </div>
    </div>
</div>
<div id="menu">
   <div id="navigation">
       <ul>
        <li id="dropmenu">
		  <a href="/">{{ _('All Albums') }}</a>
            {% if allalbums %}
                <ul>
                    {% for ab in allalbums %}
                        <li><a href="/{{ab.name}}/">{{ab.name|truncate(20,True)}}{% if not ab.public %} ({{ _("private") }}) {% endif %}</a></li>
                    {% endfor %}
                </ul>
            {% endif %}
		</li> 
        {% if album %}
        <li>&gt;&gt;</li>
        <li><a href="/{{album.name}}/">{{album.name|truncate(20,True)}}</a> </li>
        {% endif %}
        {% if photo %}
        <li>&gt;&gt;</li>
        <li><a href="/{{album.name}}/{{photo.name}}">{{photo.name|truncate(20,True)}}</a> </li>
        {% endif %}
        {% block ex_navigation %} {% endblock %}
       </ul>
   </div>

   <div id="commandbar">
       <ul>
       {% if users.is_admin %}
        <li><a href="/admin/upload/"> {{ _('Add Photos') }} </a></li>
       {% endif %}
       {% if users.is_admin %}
           <li>|</li>
           <li><a id="btncreate"> {{ _('Create Album') }} </a></li>
       {% endif %}
       {% block commandbar %}
       {% endblock %}
       </ul>
	</div>
   
</div>
<!-- end header -->
<!-- start page -->
<div id="page">
{% block page %}{% endblock %}
</div>
<!-- end page -->
<div style="clear: both;"></div>
<div id="footer">
    <p>Powered by  <a href="http://code.google.com/p/gaephotos/">GAEPhotos V{{ version }}</a>. Theme by <a href="http://www.freecsstemplates.org/">Free CSS Templates</a>.</p>
</div>
{% if users.is_admin %}
<div id="create_album" style="display:none; cursor: default;">
    <h2>{{ _('Create Album') }}</h2>
    <table id="admin_table" style="width: 100%;">
        <tr>
            <th scope="row" style="width: 120px;">{{ _('Album Name') }}:</th>
            <td style="text-align: left;">
                <input id="new_name" name="new_name" type="text" size="18" value=""/>
                <input id="new_public" type="radio" name="new_public" value="true" checked>{{ _("public") }}</input>
                <input type="radio" name="new_public" value="false">{{ _("private") }}</input>
            </td>
        </tr>
        <tr>
            <th scope="row" style="width: 120px;">{{ _('Description') }}:</th>
            <td style="text-align: left;"> <input id="new_description" name="new_description" type="text" size="30" value=""/> </td>
        </tr>
    </table>
    <div style="clear: both;"></div>
    <div style="padding: 5px;">
        <input id="create" type="submit" value="{{ _('Create Album') }}" name="createalbum">
        <input id="cancel" type="submit" value="{{ _('Cancel') }}" name="createalbum">
    </div>
</div>
{% endif %}
</body>
</html>
